import React from 'react';

import "./style.scss";

const UnreadWarn = ({ unRead = 0, white = false }) => {
  const cUnRead = Number.parseInt(unRead, 10);
  let className = '';

  if (Number.isNaN(cUnRead)) {
    return null;
  }
  const unReadText = ((num) => {
    if (num <= 99 && num > 0) {
      className = num < 10 ? 'small' : 'normal';
      return num.toString();
    } else if (num === 0) {
      className = 'mini';
      return ''
    } else {
      className = 'big';
      return `99+`;
    }
  })(cUnRead);

  return (
    <div className={`unreadWarn ${className}`}>
      { unReadText }
    </div>
  );
};

export default UnreadWarn;
